<template>
  <div>
    我是列表页

    <ul class="list-con">
      <li v-for="i in listArr" :key="i.item_id">
        <!-- 动态传递参数，需要使用字符串连接 -->
        <router-link :to="`/item/${i.item_id}/${i.min_price}`">
          <img :src="i.over_image_url" />
          {{ i.item_name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "list",
  data() {
    return {
      listArr: [],
    };
  },
  mounted() {
    axios.get("./json/list.json").then((res) => {
      this.listArr = res.data.data.item_list;
    });
  },
};
</script>

<style scoped>
/* scoped 样式只作用于本页面 */
.list-con {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.list-con li {
  width: 30%;
  border: 1px solid lightgreen;
  margin-bottom: 8px;
  overflow: hidden;
}
.list-con li img {
  width: 100%;
}
</style>
